<script setup lang="ts">
const props = defineProps<{ comfirm: () => void }>();
const open = () => {
  ElMessageBox.confirm(
    "删除后，该对话将不可恢复。确认删除吗？",
    "永久删除对话",
    {
      confirmButtonText: "删除",
      cancelButtonText: "取消",
      type: "error",
      customStyle: {
        width: "100%",
        borderRadius: "18px",
        padding: "18px 21px 21px",
        boxSizing: "border-box",
        fontWeight: "600",
        fontSize: "18px",
        lineHeight: "24px",
      },
      confirmButtonClass: "confirm-red-button",
      cancelButtonClass: "cancel-button",
      showClose: false,
    }
  ).then(() => {
    props.comfirm();
    ElMessage({
      showClose: true,
      type: "success",
      message: "删除成功",
      plain: true,
    });
  });
};
defineExpose({ open });
// 强行注入样式
const addRedButtonStyle = () => {
  const style = document.createElement("style");
  style.textContent = `
    .confirm-red-button {
      width: 56px;
      height: 34px;
      border-radius: 10px !important;
      background-color: #f56c6c !important;
      border-color: #f56c6c !important;
      color: white !important;
    }
    .confirm-red-button:hover {
      background-color: #da3636 !important;
    }
    .cancel-button {
      width: 56px;
      height: 34px;
      border-radius: 10px !important;
      background-color: #fff !important;
      color: #404040 !important;
    }
    .cancel-button:hover {
      background-color: #f5f5f5 !important;
      border-color: #f5f5f5 !important;
    }
  `;
  document.head.appendChild(style);
};
addRedButtonStyle();
</script>

<template></template>

<style scoped lang="scss"></style>
